<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <style>
    .list-li1 {
      background-color: red;
    }
  </style>
  <body>
    <div id="root"></div>
    <div id="root1"></div>
    <script>
      // es5方法创建
      // let element = React.createElement('h1', {}, 'Hello World!') //节点，节点属性，标签内容
      let element = React.createElement('h1', null, 'Hello World!') //节点，节点属性，标签内容
      ReactDOM.render(element, document.getElementById('root'))
      let li1 = React.createElement('li', null, 'First')
      let li2 = React.createElement('li', { className: 'list-li1' }, 'Second')
      let _ul = React.createElement('ul', null, li1, li2,li1,li2)
      ReactDOM.render(_ul, document.getElementById('root1'))
    </script>
  </body>
</html>
